{extend name="public/base"}

{block name="css"}
<style>
    i{
        display: none !important;
    }
    .layui-form-checkbox[lay-skin=primary] {
        padding-left: 0;
    }
</style>
{/block}

{block name="main"}
<div class="layui-card">
    <blockquote class="layui-elem-quote layui-quote-nm">查看管理员权限</blockquote>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">查看权限</label>
            <div class="layui-input-block">
                <div id="LAY-auth-tree-index"></div>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '/layui_admin/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'authtree'], function () {
        let $ = layui.$
            , form = layui.form, admin = layui.admin, authtree = layui.authtree;

        $(function () {
            //请求数据接口
            admin.req({
                url: '{:url("show_auth")}',  //实际使用请改成服务端真实接口
                data: {
                    id: '{$id}'
                }
                , done: function (res) {
                    // authtree.render('#LAY-auth-tree-index', res.tree, 'authIds[]', 'lay-check-auth');
                    // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                    authtree.render('#LAY-auth-tree-index', res.tree, {
                        inputname: 'auth_ids[]',
                        layfilter: 'lay-check-auth',
                        openall: true,
                        autowidth: true,
                    });
                }
            });
        });

        form.on('checkbox(lay-check-auth)', function(data){
            // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
            setTimeout(function(){
                // 获取选中的叶子节点
                let leaf = authtree.getLeaf('#LAY-auth-tree-index');
                console.log(leaf);
            }, 100);
        });

        /**
         * 列表加载完成之后的回调函数
         * @param d
         */
        layui.data.done = function(d){
            console.log(d);
            layui.use(['form'], function(){
                form.render(null, 'component-form-group');
            });
        };
    });
</script>
{/block}